<template>
  <div class="slider-container">
    <!-- 左侧幻灯片 -->
    <div class="left-slide" :style="{ transform: `translateY(-${activeSlideIndex * 100}vh)` }">
      <div
        v-for="(slide, index) in slides"
        :key="index"
        :style="{ backgroundColor: slide.color }"
      >
      <h1 id="titleText">{{ slide.title }}</h1>
      <p id="descriptionText">{{ slide.description }}</p>
      </div>
    </div>

    <!-- 右侧幻灯片 -->
    <div class="right-slide" :style="{ transform: `translateY(-${activeSlideIndex2 * 100}vh)` }">
      <div
        v-for="(slide, index) in slides"
        :key="index"
        :style="{ backgroundImage: `url(${slide.image})` }"
      ></div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button class="down-button" @click="changeSlide('down')">
        <i class="fas fa-arrow-down">↓</i>
      </button>
      <button class="up-button" @click="changeSlide('up')">
        <i class="fas fa-arrow-up">↑</i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VerticalSlider',
  data()
  {
    return {
      activeSlideIndex: 0, // 当前激活的幻灯片索引
      activeSlideIndex2: 0, // 当前激活的幻灯片索引
      slides: [
        {
          color: '#FFB866',
          title: '自助存取',
          description: '时间灵活',
          image: require('@/assets/Index-1.jpeg') // 使用 require
        },
        {
          color: '#FD3555',
          title: '提升配送效率',
          description: '优化空间利用',
          image: require('@/assets/Index-2.png') // 使用 require
        },
        {
          color: '#2A86BA',
          title: '降低运营成本',
          description: '提高收益',
          image: 'https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80'
        },
        {
          color: '#252E33',
          title: '应用场景广泛',
          description: '寄存物品多样',
          image: 'https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80'
        }
      ]
    }
  },
  methods: {
    changeSlide(direction)
    {
      if (direction === 'up')
      {
        this.activeSlideIndex++
        if (this.activeSlideIndex > this.slides.length - 1)
        
          this.activeSlideIndex = 0
        this.activeSlideIndex2--
        if (this.activeSlideIndex2 < 0)
        
          this.activeSlideIndex2 = this.slides.length - 1
      }
      else if (direction === 'down')
      {
        this.activeSlideIndex--
        if (this.activeSlideIndex < 0)
        
          this.activeSlideIndex = this.slides.length - 1
        this.activeSlideIndex2++
        if (this.activeSlideIndex2 > this.slides.length - 1)
        
          this.activeSlideIndex2 = 0
      }
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
}

.slider-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.left-slide {
  height: 100%;
  width: 35%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

.left-slide > div {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
}

.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 35%;
  width: 65%;
  transition: transform 0.5s ease-in-out;
}

.right-slide > div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}

button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

button:hover {
  color: #222;
}

button:focus {
  outline: none;
}

.slider-container .action-buttons button {
  position: absolute;
  left: 35%;
  top: 50%;
  z-index: 100;
}

.slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

#titleText {
  user-select: none;
  text-align: center; /* 居中对齐 */
  font-size: 2.2em; /* 字体大小适中 */
  color: #2c3e50; /* 使用深蓝色调，更显专业 */
  font-weight: 700; /* 字体加粗，但不那么生硬 */
  margin-bottom: 15px; /* 添加一些底部外边距 */
  letter-spacing: 1px; /* 字母间距，增加可读性和设计感 */
  position: relative; /* 用于添加伪元素 */
}

#titleText::after {
  content: ""; /* 添加伪元素 */
  display: block;
  width: 50px; /* 线条宽度 */
  height: 3px; /* 线条高度 */
  background-color: #1abc9c; /* 线条颜色，使用清新的绿色 */
  position: absolute;
  bottom: -10px; /* 线条位置 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
}

#descriptionText {
  user-select: none;
  text-align: center; /* 居中对齐 */
  font-size: 1.1em; /* 字体大小适中 */
  color: #7f8c8d; /* 使用淡灰色，与标题形成对比 */
  line-height: 1.5; /* 设置行高以增加可读性 */
  margin-top: 10px; /* 添加一些顶部外边距 */
  max-width: 600px; /* 限制最大宽度，防止文本过宽 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
  padding: 15px; /* 添加内边距 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}
</style>
